<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>朝阳微报</title>
		<link rel="icon" href="./tlogo.png">
		<script>
		function reloadPage(){
			location.reload()
		}
		</script>
	</head>
	<style type="text/css">
		.db {
			display: block;
		}

		.weixinAudio {
			line-height: 1.5;
		}

		.audio_area {
			display: inline-block;
			width: 100%;
			vertical-align: top;
			margin: 0px 1px 0px 0;
			font-size: 0;
			position: relative;
			font-weight: 400;
			text-decoration: none;
			-ms-text-size-adjust: none;
			-webkit-text-size-adjust: none;
			text-size-adjust: none;
		}

		.audio_wrp {
			border: 1px solid #ebebeb;
			background-color: #fcfcfc;
			overflow: hidden;
			padding: 12px 20px 12px 12px;
		}

		.audio_play_area {
			float: left;
			margin: 9px 22px 10px 5px;
			font-size: 0;
			width: 18px;
			height: 25px;
		}

		.playing .audio_play_area .icon_audio_default {
			display: block;
		}

		.audio_play_area .icon_audio_default {
			background: transparent url(ico/iconloop.png) no-repeat 0 0;
			width: 18px;
			height: 25px;
			vertical-align: middle;
			display: inline-block;
			-webkit-background-size: 54px 25px;
			background-size: 54px 25px;
			background-position: -36px center;
		}

		.audio_play_area .icon_audio_playing {
			background: transparent url(ico/iconloop.png) no-repeat 0 0;
			width: 18px;
			height: 25px;
			vertical-align: middle;
			display: inline-block;
			-webkit-background-size: 54px 25px;
			background-size: 54px 25px;
			-webkit-animation: audio_playing 1s infinite;
			background-position: 0px center;
			display: none;
		}

		.audio_area .pic_audio_default {
			display: none;
			width: 18px;
		}

		.tips_global {
			color: #8c8c8c;
		}

		.audio_area .audio_length {
			float: right;
			font-size: 14px;
			margin-top: 3px;
			margin-left: 1em;
		}

		.audio_info_area {
			overflow: hidden;
		}

		.audio_area .audio_title {
			font-weight: 400;
			font-size: 17px;
			margin-top: -2px;
			margin-bottom: -3px;
			width: auto;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			word-wrap: normal;
		}

		.audio_area .audio_source {
			font-size: 14px;
		}

		.audio_area .progress_bar {
			position: absolute;
			left: 0;
			bottom: 0;
			background-color: #0cbb08;
			height: 2px;
		}

		.playing .audio_play_area .icon_audio_default {
			display: none;
		}

		.playing .audio_play_area .icon_audio_playing {
			display: inline-block;
		}

		@-webkit-keyframes audio_playing {
			30% {
				background-position: 0px center;
			}
			31% {
				background-position: -18px center;
			}
			61% {
				background-position: -18px center;
			}
			61.5% {
				background-position: -36px center;
			}
			100% {
				background-position: -36px center;
			}
		}
		.button {
			background-color: #07c160;
			border: none;
			border-radius: 4px;
			font-size: 18px;
			color: #FFFFFF;
			padding: 3px;
			height: 100%;
			text-align: center;
			text-decoration: none;
			overflow: hidden;
			cursor: pointer;
		}

		.flex-item {
			/* height: 100%; */
			margin: 2px;
		}
		.flex-item1 {
			/* height: 100%; */
			padding: 6px;
		}
		.flex-container {
			display: -webkit-flex;
			display: flex;
			-webkit-justify-content: space-between;
			justify-content: space-between;
			flex-wrap: wrap;
			-webkit-align-content: center;
			align-content: center;
			height: 100%;
			border:#7f7f7f solid 1px;
			background-color: #eef3f7;
		}
		.footer-text{
			text-align: center;
		}
	</style>

	<body onload="showTime()">
		<div class="flex-container">
			<div class="flex-item flex-item1" id="datetime"></div>
			<div class="flex-item">
				<a>未更新点击</a>&nbsp;<button class="button" onclick="reloadPage()">更新早报</button>
			</div>
		</div>
		<p class="weixinAudio">
			<audio src="" id="media" width="1" height="1" preload></audio>
			<span id="audio_area" class="db audio_area">
			<span class="audio_wrp db">
			<span class="audio_play_area">
				<i class="icon_audio_default"></i>
				<i class="icon_audio_playing"></i>
            </span>
			<span id="audio_length" class="audio_length tips_global"></span>
			<span class="db audio_info_area">
                <strong class="db audio_title">9月28日新闻早餐语音版</strong>
                <span class="audio_source tips_global">来源：<strong>朝阳微报<a style="color:#07c160">（点击播放）</a></strong></span>
			</span>
			<span id="audio_progress" class="progress_bar" style="width: 0%;"></span>
			</span>
			</span>
		</p>
		<div class="zb" align="center">
            <text style="color:#fa5151">长按下方微报，保存图片</text>
        </div>
		<div class="zb" align="center">
            <img style="max-width:100%;overflow:hidden;" src="mrzb/cyzb210928.jpeg" alt="朝阳微报"/>
        </div>
		<br>
		<div class="footer-text">
			<a href="https://gitee.com/"
				target="_blank">gitee</a>&nbsp;技术支持
		</div>
	</body>
	<script>
		function showTime() {
			var date = new Date();//实例一个时间对象；
			var Year=date.getFullYear();//获取系统的年；
			var Month=date.getMonth()+1;//获取系统月份，由于月份是从0开始计算，所以要加1
			var Dates=date.getDate();//获取系统日期,
			var week = date.getDay(); //星期
			//var Hour=date.getHours();//获取系统时
			//当数值为个数时，在前面加0
			//	if(Hour<10){
			//		Hour='0'+Hour;
			//	}else{
			//		Hour=Hour;
			//	}
			//var Minute=date.getMinutes();//分
			//	if(Minute<10){
			//		Minute='0'+Minute;
			//	}else{
			//		Minute=Minute;
			//	}
			//var Second=date.getSeconds();//秒
			//	if(Second<10){
			//		Second='0'+Second;
			//	}else{
			//		Second=Second;
			//	}
			//判断星期几 
			var weeks = ["日","一","二","三","四","五","六"]; 
			var getWeek = "星期" + weeks[week];
				document.getElementById('datetime').innerHTML=Year +"年" + Month + "月" + Dates +"日"+" "+ getWeek+" ";
				setTimeout('showTime()',1000);//每隔1秒获取一次时间
		}
	</script>
	<script src="js/jquery-1.10.2.js"></script>
	<script src="js/weixinAudio.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$('.weixinAudio').weixinAudio({
			autoplay:false,//true为自动播放
			src:'mp3/cyzb210928.mp3',
		});
	</script>
</html>